import { ReqHospitalShow } from '@/api/hospitalList/hospitalList';
import type { HospitalShowType } from '@/api/hospitalList/model/hospitalListTypes';
import { Button, Card, Descriptions, Skeleton } from 'antd'
import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom';

export default function HospitalShow() {

    //获取navigate 函数
    let navigate = useNavigate();

    // 获取地址栏 params 餐参数
    let { id } = useParams();

    //创建 医院详情状态
    let [hospital, setHospital] = useState<HospitalShowType>();

    //单独模拟 componentDidMount
    useEffect(() => {
        async function main() {
            //调用请求医院详情出的方法
            let result = await ReqHospitalShow(id as string);
            // console.log(result)
            setHospital(result);
        }

        main();
    }, []);


    return (
        <Card>
            {
                hospital?.hospital ?
                    <>
                        <Descriptions title="基本信息" bordered column={3}>
                            <Descriptions.Item label="医院名称" style={{ width: 150 }} span={1}>{hospital?.hospital.hosname}</Descriptions.Item>
                            <Descriptions.Item label="医院logo" span={2}>
                                <img style={{ width: 100 }} src={hospital?.hospital.logoData && `data:image/jpeg;base64,${hospital?.hospital.logoData}`} alt="" />
                            </Descriptions.Item>
                            <Descriptions.Item label="医院编码" span={1}>{hospital?.hospital.hoscode}</Descriptions.Item>
                            <Descriptions.Item label="医院地址" span={2}>{hospital?.hospital.param.fullAddress}</Descriptions.Item>
                            <Descriptions.Item label="坐车路线" span={3}>
                                {hospital?.hospital.route}
                            </Descriptions.Item>
                            <Descriptions.Item label="医院简介" span={3}>{hospital?.hospital.intro}</Descriptions.Item>
                        </Descriptions>

                        <Descriptions title="预约规则信息" bordered className='mt' column={3}>
                            <Descriptions.Item label="预约周期" span={1}>{hospital?.bookingRule.cycle}</Descriptions.Item>
                            <Descriptions.Item label="放号时间" span={2}>{hospital?.bookingRule.releaseTime}</Descriptions.Item>
                            <Descriptions.Item label="停挂时间" span={1}>{hospital?.bookingRule.stopTime}</Descriptions.Item>
                            <Descriptions.Item label="退号时间" span={2}>{hospital?.bookingRule.quitTime}</Descriptions.Item>
                            <Descriptions.Item label="预约规则" span={3}>
                                {hospital?.bookingRule.rule.map((item, index) => {
                                    return <div key={index}>{index + 1}.{item}</div>
                                })}
                            </Descriptions.Item>
                        </Descriptions>

                        <Button onClick={() => {
                            navigate(-1);
                        }} type="default" className='mt'>返回</Button>
                    </>
                    :
                    <>
                        <Skeleton />
                        <Skeleton />
                        <Skeleton />
                    </>

            }


        </Card>
    )
}
